import React   from 'react'
import {
  Collapse,
  Select,
  Row,
  Col,
  Input,
  Icon,
  Carousel
} from 'antd';
import './collapse.scss';

const Panel  = Collapse.Panel;
const Option = Select.Option;

export default class Layout extends React.Component{

  render () {
    return <div className="collapseWrapper">
        <Collapse accordion>
          <Panel header="兴趣点" key="1">
            <Row>
              <Col span={6}>范围</Col>
              <Col span={6}>
                <Select defaultValue="lucy" style={{ width: 120 }} onChange={e => this.handleChange(e)}>
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  {/* <Option value="disabled" disabled>Disabled</Option> */}
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </Col>
            </Row>

            <Row style={{ paddingTop: "1rem" }}>
              <Input placeholder="兴趣点名称" suffix={<Icon type="search" style={{ color: "rgba(0,0,0,.25)" }} />} />
            </Row>

            <Carousel afterChange={(a, b, c) => this.onChange()}>
              <div>
                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">旅馆住宿</p>
                </div>
                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">饭馆餐饮</p>
                </div>
                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">体育运动</p>
                </div>

                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">旅馆住宿</p>
                </div>
                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">饭馆餐饮</p>
                </div>
                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">体育运动</p>
                </div>

                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">旅馆住宿</p>
                </div>
                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">饭馆餐饮</p>
                </div>
                <div class="collapse-icon">
                  <div class="collapse-icon-img">
                    <img class="collapse-icon-img-content" src={require('../../Images/旅馆住宿.png')} />
                  </div>
                  <p class="collapse-icon-desc">体育运动</p>
                </div>
              </div>

              <div>
                <h3>2</h3>
              </div>
              <div>
                <h3>3</h3>
              </div>
              <div>
                <h3>4</h3>
              </div>
            </Carousel>
          </Panel>
          <Panel header="车辆查询" key="2">
            <p />
          </Panel>
        </Collapse>
      </div>;
  }

  handleChange (value) {
    console.log(`selected ${value}`);
  }

  onChange(a, b, c) {
    console.log(a, b, c);
  }
};